<template>
	<view class="my">
		<view class="my-head">
			<view class="title">
				<view class="title-txt">我的</view>
				<view class="title-right" @tap="infoBtn"><image src="/static/ic/ld.png" mode=""></image></view>
			</view>
			
			<view class="my-user">
				<view class="userinfo" @tap="userBtn">
					<view class="userinfo-img"><image src="/static/icon/head.jpg" mode=""></image></view>
					<view class="userinfo-txt">
						<view class="name">个人店主<text>（广州市公司）</text></view>
						<view class="code">账号:15908800770</view>
					</view>
					<view class="userinfo-icon">
						<view class="infoCode"><image src="/static/ic/tgm1.png" mode=""></image></view>
						<view class="right"><image src="/static/ic/rigth.png" mode=""></image></view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="my-development" v-for="(item,tab) in developmentData" :key="tab">
			<view class="title">{{item.title}}</view>
			<view class="content">
				<view class="list" v-for="(items,index) in item.dataList" :key="index" @tap="optionsBtn(items)">
					<view class="list-icon"><image :src="items.icon" mode=""></image></view>
					<view class="list-txt">{{items.title}}</view>
				</view>
			</view>
		</view>
		<personal-tab-bar :current="3" backgroundColor="#FFFFFF" color="#9597A6" tintColor="rgba(0, 144, 250, 1)"></personal-tab-bar>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				developmentData:[
					{
						title:'渠道拓展',
						dataList:[
							{title:'个人店主',icon:'/static/ic/grdz.png',url:'pages/unitShop/index?id=1'},
							{title:'商家',icon:'/static/ic/sj.png',url:'pages/unitShop/index?id=2'},
							{title:'城市合伙人',icon:'/static/ic/cshhr.png',url:'pages/unitShop/index?id=3'}
						],
					},
					{
						title:'通用设置',
						dataList:[
							{title:'钱包管理',icon:'/static/ic/qbgl.png',url:'pages/wallet/index'},
							{title:'设置中心',icon:'/static/ic/szzx.png',url:'pages/setCentre/index'},
							{title:'帮助中心',icon:'/static/ic/bzzx.png',url:''}
						],
					},
				]
			}
		},
		onLoad() {
			
		},
		methods:{
			userBtn(){
				uni.navigateTo({
					url:'pages/userInfo/index'
				})
			},
			optionsBtn(items){
				uni.navigateTo({
					url:items.url
				})
			},
			infoBtn(){
				uni.navigateTo({
					url:'pages/information/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.my{
		&-development{
			width:710rpx;
			height:264rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 6rpx 6rpx rgba(65,83,108,0.2);
			opacity:1;
			padding: 22rpx 30rpx;
			margin-top: 22rpx;
			margin-left: 20rpx;
			border-radius: 20rpx;
			.title{
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(51,51,51,1);
				opacity:1;
			}
			.content{
				display: flex;
				align-items: center;
				text-align: center;
				margin-top: 58rpx;
				.list{
					flex: 1;
					&-icon{
						width:40rpx;
						height:40rpx;
						margin: 0 auto;
						opacity:1;
						image{
							width: 100%;
							height: 100%;
						}
					}
					&-txt{
						font-size:24rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(104,104,104,1);
						opacity:1;
						margin-top: 18rpx;
					}
				}
			}
			
		}
		&-user{
			width:100%;
			height:319rpx;
			background: url(../../../../static/ic/bgimg2.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			opacity:1;
			padding: 78rpx 40rpx;
			.userinfo{
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				&-img{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 22rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-txt{
					.name{
						font-size:36rpx;
						font-family:PingFang SC;
						font-weight:bold;
						color:rgba(255,255,255,1);
						opacity:1;
						text{
							font-size:28rpx;
							font-family:PingFang SC;
							font-weight:bold;
							color:rgba(255,255,255,1);
							opacity:1;
						}
					}
					.code{
						font-size:28rpx;
						font-family:PingFang SC;
						font-weight:500;
						color:rgba(255,255,255,1);
						opacity:1;
						margin-top: 4rpx;
					}
				}
				&-icon{
					margin-left: auto;
					display: flex;
					.infoCode{
						width: 40rpx;
						height: 40rpx;
						margin-right: 40rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.right{
						width:19rpx;
						height:32rpx;
						margin-top: 4rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		&-head{
			padding-top: 90rpx;
			width:100%;
			height:490rpx;
			background-color: rgba(0, 144, 250, 1);
			opacity:1;
			.title{
				width: 100%;
				padding: 22rpx 32rpx;
				
				opacity:1;
				// display: flex;
				&-txt{
					text-align: center;
					width:274rpx;
					height:44rpx;
					font-size:34rpx;
					font-family:PingFang SC;
					font-weight:600;
					color:rgba(255,255,255,1);
					opacity:1;
					margin: 0 auto;
				}
				&-right{
					width:44rpx;
					height:43rpx;
					opacity:1;
					position: absolute;
					right: 32rpx;
					top: 112rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
</style>
